<template>
    <div>
        <el-button type="primary" @click="add">添加新类</el-button>
        <shade v-show="isAdd">
            <div class="add-form" v-show="isAdd">
                <div class="recommend-from">
                    <strong>请输入添加类，enter键确认添加</strong><br>
                    <strong style="font-size: 12px; color: red">ps: 一类中，重复添加商品最终仅会显示一次,商品请上传三的倍数，首页每行显示三个商品</strong>
                    <p>类标题：{{recommendForm.title}}</p>
                    <p>商品id：</p>
                    <p v-for="(item, index) in recommendForm.goodsId" :key="index">{{index}}--{{item}}</p>
                    <el-input v-model="title" placeholder="请输入推荐类标题,按回车结束" v-if="!recommendForm.title" @keydown.native.enter="addTitle"></el-input>
                    <el-input v-model="goodsId" placeholder="请输入推荐商品id,按回车结束" v-else @keydown.native.enter="addGoodsId"></el-input>
                    <div class="btn">
                        <el-button type="primary" size="small" @click="submit">提交</el-button>
                        <el-button type="info" size="small" @click="close">取消</el-button>
                    </div>
                </div>
                <goods-name-to-id></goods-name-to-id>
            </div>
        </shade>
        <el-collapse class="already">
            <strong v-if="recommends.length > 0">已存在推荐类</strong>
            <strong v-else>暂无推荐</strong>
            <el-collapse-item  v-for="(item, index) in recommends" :key="index">
                    <template slot="title" >
                        {{item.title}}
                        <a href="javascript: void(0)" class="del" @click.stop="del(item)">删除</a>
                    </template>
                    <div v-for="(goodsId, index2) in item.goodsId" :key="index2">
                       <strong>商品id：</strong> {{goodsId}}
                    </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import Shade from "../../../../components/common/shade/Shade";
    import GoodsNameToId from "./GoodsNameToId";
    import {sendwithget, sendwithpost} from "../../../../network/profile";
    export default {
        name: "Recommend",
        data() {
            return {
                recommends: [],
                recommendForm: {
                    title: null,
                    goodsId: []
                },
                title: '',
                goodsId: '',
                input: '',
                recommendItem: '',
                isAdd: false
            }
        },
        components: {
            Shade,
            GoodsNameToId
        },
        created() {
            this.update()
        },
        methods: {
            add() {
                this.isAdd = !this.isAdd
            },
           addTitle() {
                this.recommendForm.title = this.title
                this.title = ''
           },
           addGoodsId() {
                this.recommendForm.goodsId.push(this.goodsId)
               this.goodsId = ''
           },
           close() {
                this.add()
                this.recommendForm = {
                    title: null,
                    goodsId: []
                }
           },
           submit() {
                if (!this.recommendForm.title) {
                    this.$message({
                        showClose: true,
                        message: '请输入类名',
                        type: 'error'
                    })
                }else if (this.recommendForm.goodsId.length === 0) {
                    this.$message({
                        showClose: true,
                        message: '请输入商品id名',
                        type: 'error'
                    })
                } else {
                    if (window.confirm('你确定要提交吗')) {
                        sendwithpost({
                            url: '/addRec',
                            data:  this.recommendForm
                        }).then(res=> {
                            this.$message({
                                showClose: true,
                                message: res.data.message,
                                type: res.data.type
                            })
                            if (res.data.res_code == 2) {
                                this.close()
                            }
                        })
                    }else {
                        return
                    }
                }


           },
            update() {
                sendwithget({
                    url: '/getRec'
                }).then(res=> {
                   if (res.data.res_code == 2) {
                       this.recommends = res.data.data
                   }else{
                       this.$message({
                           showClose: true,
                           message: res.data.message,
                           type: res.data.type
                       })
                   }
                })
            },
            del(recommend) {
                if (window.confirm(`你确定要删除${recommend.title}么？`)) {
                    sendwithpost({
                        url: '/delRec',
                        data: {
                            id: recommend.id
                        }
                    }).then(res=> {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.type
                        })
                        if (res.data.res_code == 2) {
                            this.update()
                        }
                    })
                }
            }
       }
    }
</script>

<style scoped>
    .add-form {
        width: 900px;
        min-height: 300px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        padding: 40px;
    }
    .recommend-from {
        width: 400px;
    }
    .btn {
       position: absolute;
        bottom: 1em;
        right: 50%;
    }
    .already {
        width: 600px;
    }
    .del {
        margin-left: 500px;
    }
</style>